<!--
 * @Author:商品详情
 * @Date: 2020-06-29 10:19:00
 * @LastEditTime: 2020-07-06 18:04:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \JKShopping\jkshopping\src\pages\payment\order\components\details.vue
--> 
<template>
  <div class="details">
    <div class="details_box clearFix">
      <div class="title">
        <van-icon class="icon" name="send-gift-o" size="18" color="#ccc" />
        <span class="name">商品详情</span>
      </div>
      <ul class="goods_box">
        <li class="goods_item" v-for="item of goodsList" :key="item.id">
          <div class="left">
            <van-image width="70" height="70" :src="item.goods.goods_thumb" />
          </div>
          <div class="content">
            <div class="name">{{item.goods.goods_name}}</div>
            <div class="type">{{item.attr_info}}</div>
            <div class="num">x{{item.goods_number}}</div>
          </div>
          <div class="right">
            <span class="price">{{item.goods_number * item.price_original| toFixed | rmb}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="submitBar">
      <van-submit-bar :price="getSum()" button-text="去支付" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/order/order.js"; //创建订单请求
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("cartModule");
export default {
  data() {
    return {
      goodsList: [], //商品列表
      addressId: "" //收货地址id
    };
  },

  computed: {
    ...mapState(["isChecked"])
  },
  methods: {
    // 创建订单接口方法
    async API_create_order(user_coupon_id, address_id, type) {
      let params = {
        user_coupon_id,
        address_id,
        type
      };
      return await api.create_order(this.qs.stringify(params));
    },
    // 点击支付按钮
    async onSubmit() {
      if (!this.addressId) {
        this.$toast.fail("请选择地址");
      } else {
        //调用创建订单方法
        let address = await this.API_create_order(0, this.addressId, 1);
        console.log(address);
        this.$router.push("/orderpay");
      }
    },
    //计算总价钱
    getSum() {
      var sum = 0;
      for (var i in this.goodsList) {
        sum +=
          this.goodsList[i].price_original * this.goodsList[i].goods_number;
      }
      return sum * 100;
    }
  },

  activated() {
    //获取地址的信息
    this.goodsList = this.isChecked;
    this.$eventBus.$on("address", res => {
      this.addressId = res.id;
    });
  }
};
</script>

<style lang="scss" scoped>
.details {
  .details_box {
    margin-top: 10px;
    width: 100%;
    // height: 150px;
    /*商品的详情标题样式*/
    .title {
      border-bottom: #ccc 1px solid;
      height: 40px;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      background-color: #fff;
      //   .icon {
      //   }
      .name {
        margin-left: 5px;
      }
    }
    /*商品列表样式*/
    .goods_box {
      .goods_item {
        // height: 90px;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
        display: flex;
        padding: 20px;
        .left {
          margin-right: 10px;
        }
        .content {
          /*商品名字样式*/
          .name {
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 10px;
          }
          .type {
            margin-bottom: 10px;
          }
          .num {
          }
        }
        /*商品价钱题样式*/
        .right {
          position: relative;
          right: -40px;
          top: 30px;
          .price {
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>
